<template>
  <div :style="{width:'600px'}" ref="nesting" id="echartsBox">
  </div>
</template>
<script>
  export default {
    data() {
      return {
        autoHeight: 1,
        charts: '',
        yName: [],
        xName: [],
        series: [],
        title: ''
      }
    },
    computed: {
      options() {
        return {
          title: {
            show: true,//显示策略，默认值true,可选为：true（显示） | false（隐藏）
            text: this.title,//主标题文本，'\n'指定换行
            x: 'center',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
            y: 'top',//垂直安放位置，默认为top，可选为：'top' | 'bottom' | 'center' | {number}（y坐标，单位px）
            textAlign: null,//水平对齐方式，默认根据x设置自动调整，可选为： left' | 'right' | 'center
          },
          // 工具箱
          toolbox:{
            show:true,
            top: '50',//水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
              right: '00',
            feature:{
              // 数据视图
              dataView:{
                show:true
              },
              // 还原
              restore:{
                show:true
              },
              // 区域缩放
              dataZoom:{
                show:true
              },
              // 保存图片
              saveAsImage:{
                show:true
              },
              // //动态类型切换
              // magicType:{
              //   type:['line','bar']
              // }
            }
          },
          tooltip: {
            trigger: 'axis',
            // show: true,
            // axisPointer: {            // 坐标轴指示器，坐标轴触发有效
            //   type: 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
            // },
            formatter: function (params) {
              var result = params[0].name;
              let total = 0
              params.forEach(function (item) {
                    total += item.value
                result+='</br>'+item.marker+" "+item.seriesName+":"+item.value
              })
              result += '<br/>' + '总数' + ':' + total
              return result

            } // 让为0的值不显示
          }, // 提示框
          legend: {
            x: 'center',
            y: ' center',
            padding: [30, 0, 0, 0],
            data: this.xName,
            selectedMode: true // 取消图例点击动态效果
          },
          grid: {

            left: '0%',
            right: '4%',
            top: '80',
            bottom: '40',
            containLabel: true
          },
          yAxis: {
            type: 'category',
            data: this.yName,
            axisLabel: { //坐标轴刻度标签的相关设置。
              formatter: function(params) {
                var newParamsName = ""; // 最终拼接成的字符串
                var paramsNameNumber = params.length; // 实际标签的个数
                var provideNumber = 7; // 每行能显示的字的个数
                var rowNumber = Math.ceil(paramsNameNumber / provideNumber); // 换行的话，需要显示几行，向上取整
                /**
                 * 判断标签的个数是否大于规定的个数， 如果大于，则进行换行处理 如果不大于，即等于或小于，就返回原标签
                 */
                // 条件等同于rowNumber>1
                if (paramsNameNumber > provideNumber) {
                  /** 循环每一行,p表示行 */
                  for (var p = 0; p < rowNumber; p++) {
                    var tempStr = ""; // 表示每一次截取的字符串
                    var start = p * provideNumber; // 开始截取的位置
                    var end = start + provideNumber; // 结束截取的位置
                    // 此处特殊处理最后一行的索引值
                    if (p == rowNumber - 1) {
                      // 最后一次不换行
                      tempStr = params.substring(start, paramsNameNumber);
                    } else {
                      // 每一次拼接字符串并换行
                      tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr; // 最终拼成的字符串
                  }

                } else {
                  // 将旧标签的值赋给新标签
                  newParamsName = params;
                }
                //将最终的字符串返回
                return newParamsName
              }

            }
          },
          xAxis: {
            type: 'value',

          },
          series: this.series
        }
      }
    },
    methods: {
      updateEchart(xName, yName, series, title) {


        this.charts.clear()
        this.xName = []
        this.yName = []
        this.series = []
        this.title = []
        this.xName = xName
        this.yName = yName
        this.series = series
        this.title = title

        // debugger
        this.charts.setOption(this.options,true)
        this.autoHeight = this.yName.length * 60 + 350
        this.charts.resize({height: this.autoHeight,})
      },
      // echart随着窗口改变
      echartResize() {
        this.autoHeight = this.yName.length * 60 + 350
        this.charts.resize({height: this.autoHeight})
      },
    },
    mounted() {
      const Echarts = require('echarts')

      this.charts = Echarts.init(this.$refs.nesting, null, {locale: 'ZH'})


    },
  }
</script>
